<template>
  <div v-loading="loading" class="wrapper-list">
    <div class="header">
      <div class="search">
        <el-input v-model="package_name" placeholder="请输入套餐名称" style="width: 300px;margin-right:20px" prefix-icon="el-icon-search" />
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
      </div>
      <div class="button-wrap">
        <el-button type="primary" @click="handleAddDialog">添加</el-button>
        <el-button type="primary" @click="handleDialog">批量删除</el-button>
      </div>
    </div>
    <el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="编号" width="50" />
      <el-table-column prop="seller_sort" label="排序" width="100" />
      <el-table-column prop="package_name" label="商品名称" width="200" />
      <el-table-column prop="package_list_pic" label="主图" width="100">
        <template slot-scope="scope">
          <img :src="scope.row.package_list_pic" :preview="scope.$index" preview-text="主图" alt="" class="image">
        </template>
      </el-table-column>
      <el-table-column prop="package_price" label="套餐价" width="150" />
      <el-table-column prop="market_price" label="门市价" width="150" />
      <!-- <el-table-column prop="stock_quantity" label="库存" width="150" /> -->
      <el-table-column prop="sale_count" label="销量/浏览量/评价数" width="200">
        <template slot-scope="scope">
          <div>{{ scope.row.sale_count }}/{{ scope.row.views }}/{{ scope.row.comment_count }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="150">
        <template slot-scope="scope">
          <el-tag v-show="scope.row.status === 0" type="warning" class="tag" @click="handleStatus(scope)">下架</el-tag>
          <el-tag v-show="scope.row.status === 1" type="success" class="tag" @click="handleStatus(scope)">上架</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="is_auth" label="审核" width="150">
        <template slot-scope="scope">
          <el-tag v-show="scope.row.is_auth === 0" type="warning">待审核</el-tag>
          <el-tag v-show="scope.row.is_auth === 1" type="success">通过</el-tag>
          <el-tag v-show="scope.row.is_auth === 2" type="error">拒绝</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="create_at" label="添加时间" width="200" />
      <el-table-column label="操作" width="300" fixed="right">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" style="margin-bottom: 10px" @click="handleEdit(scope)">编辑</el-button>
          <el-button type="primary" style="margin-bottom: 10px" @click="handleDetail(scope)">详情</el-button>
          <el-button type="primary" style="margin-bottom: 10px" @click="handleDelete(scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>listQuery.limit" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    <el-dialog
      :visible.sync="centerDialogVisible"
      title="是否删除"
      width="30%"
      center
    >
      <el-row>
        <el-radio v-model="radio" label="0">是</el-radio>
        <el-radio v-model="radio" label="1">否</el-radio>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAttestation">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="putawayDialog"
      title="是否改变状态"
      width="30%"
      center
    >
      <el-row>
        <el-radio v-model="putaway" :label="1">上架</el-radio>
        <el-radio v-model="putaway" :label="0">下架</el-radio>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="putawayDialog = false">取 消</el-button>
        <el-button type="primary" @click="handlePutaway">确 定</el-button>
      </span>
    </el-dialog>
    <router-view />
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import { parseTime } from '@/utils'
import { list, deleteAll, putawayStatus } from '@/api/combo'
export default {
  name: 'Other',
  components: {
    Pagination
  },
  data() {
    return {
      type: 'normal',
      content: '',
      deleteArr: [],
      total: 0,
      listQuery: {
        page: 1,
        limit: 10
      },
      list: [],
      centerDialogVisible: false,
      addDialog: false,
      radio: '0',
      cate: [],
      loading: false,
      putaway: 1,
      putawayDialog: false,
      currentIndex: 0,
      package_name: ''
    }
  },
  computed: {
    tableData() {
      return this.list.map((item) => {
        item = Object.assign({}, item, { edit: false })
        item.switch = item.status === 1
        if (item.create_at) {
          item.create_at = parseTime(item.create_at)
        }
        return item
      })
    }
  },
  watch: {
    $route() {
      this.initList()
    }
  },
  created() {
    this.initList()
  },
  methods: {
    // 批量选择
    handleSelectionChange(val) {
      this.deleteArr = val
    },
    // 分页
    getList(prop) {
      this.listQuery.page = prop.page
      this.listQuery.limit = prop.limit
      this.initList()
    },
    // 列表
    initList() {
      this.loading = true
      const { page, limit } = this.listQuery
      const { type, package_name } = this
      list({ page, limit, type, package_name })
        .then((res) => {
          this.loading = false
          const { total, lists } = res.data
          this.total = total
          this.list = lists
        })
    },
    // 是否删除
    handleDialog() {
      if (!this.deleteArr.length) {
        this.$message.warning({
          message: '请选择删除项',
          duration: 1000
        })
        this.centerDialogVisible = false
        return
      }
      this.centerDialogVisible = true
    },
    // 删除
    async deleteItem(id, index) {
      await deleteAll({ package_ids: id })
      this.$message.success({
        message: '删除成功',
        duration: 1000
      })
      this.tableData.splice(index, 1)
    },
    // 批量删除
    async deleteAllList(package_ids) {
      await deleteAll(package_ids)
      this.$message.success({
        message: '删除成功',
        duration: 1000
      })
      this.initList()
      this.centerDialogVisible = false
    },
    // 确认删除
    handleAttestation() {
      const result = []
      if (this.radio === '0') {
        this.deleteArr.map((item) => {
          result.push(item.id)
        })
        const package_ids = result.join(',')
        this.deleteAllList({ package_ids })
      } else {
        this.centerDialogVisible = false
      }
    },
    // 单一删除
    handleDelete(scope) {
      const { id } = scope.row
      const index = scope.$index
      this.deleteItem(id, index)
    },
    // 添加
    handleAddDialog() {
      this.$router.push({
        path: '/merchandise/combo/other/add-one'
      })
    },
    // 添加内容
    handAddContent() {
      console.log(1)
      // const { content } = this
      // await add({ content })
      //   .then((res) => {
      //     this.$message.success({
      //       message: '添加成功',
      //       duration: 1000
      //     })
      //   })
      // this.content = ''
      // this.initList()
    },
    // 编辑
    // async editContent(content, id) {
    //   return await edit({ content, id })
    // },
    async confirmEdit(params) {
      const { content, id } = params
      const info = await this.editContent(content, id)
      this.$message.success({
        message: info.msg,
        duration: 1000
      })
      params.edit = false
    },
    // 取消
    cancelEdit(params) {
      params.edit = false
    },
    // 排序
    handleSort(scope) {
      const { id } = scope.row
      return this.tableData.map((item) => {
        item.edit = item.id === id
      })
    },
    // 编辑
    handleEdit(scope) {
      this.$router.push({
        path: '/merchandise/combo/other/add-one',
        query: {
          packageId: scope.row.id,
          edit: true
        }
      })
    },
    // 详情
    handleDetail(scope) {
      const { id } = scope.row
      this.$router.push({
        path: '/merchandise/combo/other/detail',
        query: {
          id
        }
      })
    },
    handleStatus(scope) {
      if (scope.row.is_auth === 0) {
        this.$message.warning({
          message: '待审核产品不能改变状态',
          duration: 1000
        })
        return
      }
      this.currentIndex = scope.$index
      this.status = scope.row.status === 0 ? 1 : 0
      this.putawayDialog = true
    },
    async handlePutaway() {
      const index = this.currentIndex
      const package_id = this.tableData[index].id
      if (Number(this.putaway) === 1) {
        await putawayStatus({ package_id, status: this.status })
        this.$message.success({
          message: '修改成功',
          duration: 1000
        })
        this.tableData[index].status = this.status
        this.putawayDialog = false
      } else {
        this.putawayDialog = false
      }
    },
    handleSearch() {
      this.initList()
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper-list {
  width: 100%;
  box-sizing: border-box;
  .header {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .textarea{
    width: 100%;
    height: 300px;
    max-height: 400px;
    padding: 20px;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 24px;
    color: #050505;
    resize: none;
  }
  .edit-input{
    width: 80%;
    margin-bottom: 10px;
  }
  .image{
    width: 30px;
    height: 30px;
  }
  .tag{
    cursor: pointer;
  }
}
</style>
